<html>
  <head>
    <script src="http://maps.google.com.ar/maps/api/js?sensor=false&language=es"></script>
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/anthill-geocoder.js"></script>
    <script src="js/anthill-polygon.js"></script>
    <script src="js/anthill-directionsservice.js"></script>
    <script src="js/anthill-hierarchy.js"></script>
    <script src="js/anthill-maps.js"></script>
    <script>
  function init() {
$('.map').maps({
   class: 'Map',
   id: 'map1',
   params: {
     zoom: 12,
     center: new google.maps.LatLng(-31.4086, -64.19169),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   },
   poly: {
     class: 'Polygon',
     id: 'poly1',
     params: {
      path: [new google.maps.LatLng(-31.3086, -64.09169), new google.maps.LatLng(-31.3086, -64.29169), new google.maps.LatLng(-31.5086, -64.29169), new google.maps.LatLng(-31.5086, -64.09169)],
      editable: true
     },
     poly: {
      class: 'Polygon',
      id: 'poly2',
      params: {
	path: [new google.maps.LatLng(-31.3186, -64.10169), new google.maps.LatLng(-31.3186, -64.18169), new google.maps.LatLng(-31.4986, -64.18169), new google.maps.LatLng(-31.4986, -64.10169)],
	editable: true,
	fillColor: "#FF0000"
      }
     },
     poly3: {
      class: 'Polygon',
      id: 'poly3',
      params: {
	path: [new google.maps.LatLng(-31.3186, -64.18170), new google.maps.LatLng(-31.3186, -64.28169), new google.maps.LatLng(-31.4986, -64.28169), new google.maps.LatLng(-31.4986, -64.18170)],
	editable: true,
	fillColor: "#0000FF"
      }
     }
   }
 });
  }
    </script>
<style>
  .map {
    height: 100%; 
    width: 100%;
    border: 1px solid black;
  }
</style>
  </head>
  <body onload="init()">
    <div class="map"></div>
  </body>
</html>
